<template>
  <div class="oldpep">
    <div class="laoren0">
      <h2>老人吃什么对身体好？</h2>
      <div class="laoren0_1">Eat Healthy Food Is Important</div>
    </div>
    <div class="laoren">
      <div id="ha">
        <p class="header">
          人们从60岁开始步入老年阶段，这一阶段有其独特的生理代谢特点。如基础代谢率下降，细胞的功能下降，同时器官的功能也有所改
          <br />变。体内的细胞数量减少，矿物质慢慢流失，体内的水分也有所减少，各个系统的功能也有所降低。
        </p>
      </div>
      <br />
      <div class="middleshicai">
        <strong class="shicai"  @click="shiyieat()">适宜的食材</strong>
        <strong class="jinji"  @click="jinjieat()">禁忌的食材</strong>
        <br />
      </div>
      <div class="container"  v-if="shiyideshow">
        <p>1.饮食以清淡为主,早餐多吃一些营养丰富的食物有助于身体的健康。</p>
        <p>2.富含蛋白质，肉类食品均衡饮食，豆类食品也要合理搭配。</p>
        <p>3.维生素丰富，多吃有机的蔬菜和一些新鲜的水果。</p>

        <div class="main_title_3">
          <h2>Eat Health Food</h2>
          <p>It is very important for us to eat healthy food</p>
        </div>
        <div class="row justify-content-center">
          <div class="grid_item_img">
            <a class="grid_item">
              <figure>
                <img src="../assets/images/shiyi1.jpg" alt />
                <div class="info">
                  <small>122 Results</small>
                  <em>
                    <i class="icon-comment"></i> 356 Reviews
                  </em>
                  <h3>哈密瓜</h3>
                </div>
              </figure>
            </a>
          </div>
          <!-- /grid_item -->
          <div class="grid_item_img">
            <a class="grid_item">
              <figure>
                <img src="../assets/images/shiyi2.jpg" alt />
                <div class="info">
                  <small>245 Results</small>
                  <em>
                    <i class="icon-comment"></i> 123 Reviews
                  </em>
                  <h3>西瓜</h3>
                </div>
              </figure>
            </a>
          </div>
          <!-- /grid_item -->
          <div class="grid_item_img">
            <a class="grid_item">
              <figure>
                <img src="../assets/images/shiyi3.jpg" alt />
                <div class="info">
                  <small>95 Results</small>
                  <em>
                    <i class="icon-comment"></i> 245 Reviews
                  </em>
                  <h3>苹果</h3>
                </div>
              </figure>
            </a>
          </div>
          <!-- /grid_item -->
          <div class="grid_item_img">
            <a class="grid_item">
              <figure>
                <img src="../assets/images/shiyi4.jpg" alt />
                <div class="info">
                  <small>123 Results</small>
                  <em>
                    <i class="icon-comment"></i> 187 Reviews
                  </em>
                  <h3>香蕉</h3>
                </div>
              </figure>
            </a>
          </div>
          <div class="grid_item_img">
            <a class="grid_item">
              <figure>
                <img src="../assets/images/shiyi5.jpg" alt />
                <div class="info">
                  <small>92 Results</small>
                  <em>
                    <i class="icon-comment"></i> 221 Reviews
                  </em>
                  <h3>猕猴桃</h3>
                </div>
              </figure>
            </a>
          </div>
          <div class="grid_item_img">
            <a class="grid_item">
              <figure>
                <img src="../assets/images/shiyi6.jpg" alt />
                <div class="info">
                  <small>92 Results</small>
                  <em>
                    <i class="icon-comment"></i> 323 Reviews
                  </em>
                  <h3>血橙</h3>
                </div>
              </figure>
            </a>
          </div>
        </div>
      </div>
      <div class="foot"  v-if="jnjideshow">
        <p>1.忌辛辣食物,刺激性的食物,生冷食物和不易消化的食物</p>
        <p>2忌油腻食物，早餐以清淡为主，不可暴饮暴食，注意营养比例。</p>
        <p>3.忌酒忌烟，老人的身体器官退化，应远离烟酒。</p>
        <div class="main_title_3">
          <h2>Eat Health Food</h2>
          <p>It is very important for us to eat healthy food</p>
          <!-- <a href="all-categories.html">V</a> -->
        </div>
        <div class="row justify-content-center">
          <div class="grid_item_img1">
            <a href="1.html" class="grid_item">
              <figure>
                <img src="../assets/images/jinji1.jpg" alt />
                <div class="info">
                  <small>122 Results</small>
                  <em>
                    <i class="icon-comment"></i> 356 Reviews
                  </em>
                  <h3>鸡尾酒</h3>
                </div>
              </figure>
            </a>
          </div>
          <!-- /grid_item -->
          <div class="grid_item_img1">
            <a href="grid-listings-filterstop.html" class="grid_item">
              <figure>
                <img src="../assets/images/jinji2.jpg" alt />
                <div class="info">
                  <small>245 Results</small>
                  <em>
                    <i class="icon-comment"></i> 123 Reviews
                  </em>
                  <h3>蛋糕</h3>
                </div>
              </figure>
            </a>
          </div>
          <!-- /grid_item -->
          <div class="grid_item_img1">
            <a href="grid-listings-filterstop.html" class="grid_item">
              <figure>
                <img src="../assets/images/jinji3.jpg" alt />
                <div class="info">
                  <small>95 Results</small>
                  <em>
                    <i class="icon-comment"></i> 245 Reviews
                  </em>
                  <h3>咖啡</h3>
                </div>
              </figure>
            </a>
          </div>
          <!-- /grid_item -->
          <div class="grid_item_img1">
            <a href="grid-listings-filterstop.html" class="grid_item">
              <figure>
                <img src="../assets/images/jinji4.jpg" alt />
                <div class="info">
                  <small>123 Results</small>
                  <em>
                    <i class="icon-comment"></i> 187 Reviews
                  </em>
                  <h3>果酱</h3>
                </div>
              </figure>
            </a>
          </div>
          <div class="grid_item_img1">
            <a href="grid-listings-filterstop.html" class="grid_item">
              <figure>
              <img src="../assets/images/jinji5.jpg" alt />
                <div class="info">
                  <small>92 Results</small>
                  <em>
                    <i class="icon-comment"></i> 221 Reviews
                  </em>
                  <h3>冰淇淋</h3>
                </div>
              </figure>
            </a>
          </div>
          <div class="grid_item_img1">
            <a href="grid-listings-filterstop.html" class="grid_item">
              <figure>
                 <img src="../assets/images/jinji6.jpg" alt />
                <div class="info">
                  <small>92 Results</small>
                  <em>
                    <i class="icon-comment"></i> 323 Reviews
                  </em>
                  <h3>糖果</h3>
                </div>
              </figure>
            </a>
          </div>
        </div>
      </div>
      <div id="tianzhuan0">老人养生秘法</div>
      <div id="tiaozhuan">
        <ul id="tiaozhuan1">
          <li class="a1" v-for="img in peoples" :key="img.peopleId">
           <img :src="getimg(img.healthPic)" />
            <br />
            <router-link :to="'/index/article/'+img.peopleId">
              <div class="a11">{{img.healthTitle}}</div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <!-- <router-link to="/index/article">
      <h1>文章内容</h1>
    </router-link> -->
    <router-view></router-view>
    
  </div>
</template>
<script>
import "../assets/js/jinji.js";
export default {
  data() {
    return {
      shiyideshow:true,
      jnjideshow:false,
      peoples: [],
    };
  },
  //组件创建完成后执行的操作
  created() {
    this.$axios
      .get("http://localhost:3000/menu/people")
      .then(res => {
        console.log("查询结果：", res.data.data);
        this.peoples = res.data.data;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  methods:{
      getimg(pic){
          return require('../assets/images/' + pic)
      },
        shiyieat:function(){
          this.shiyideshow=true
          this.jnjideshow=false
      },
       jinjieat:function(){
          this.jnjideshow=true
          this.shiyideshow=false
      }
  }
 
};
</script>
<style lang='css' scoped>
.justify-content-center{
  /* border:1px solid #ccc; */
  width: 1300px;
  height: 500px;
  margin-left: -70px;
  
}
.shicai {
  height: 64px;
  font-size: 30px;
  color: #000000;
  padding-left: 50px;
}

.jinji {
  background: url(../assets/images/pr_t.png) no-repeat;
  height: 64px;
  font-size: 30px;
  color: #000000;
  padding-left: 50px;
  margin-left: 50px;
}
.container {
  min-width: 1170px;
  display: block;
}
.container p span {
  font-size: 18px;
}

.foot p span {
  font-size: 18px;
}
.foot{
  margin-left:35px;
}
.laoren0 {
  width: 100%;
  height: 500px;
  min-width:1200px;
  background: url("../assets/images/laoren.jpg") 100% 40% / cover no-repeat;
  border: 1px solid #ccc;
}

.laoren0_1 {
  width: 800px;
  height: 100px;
  position: relative;
  top: 48%;
  left: 30%;
  color: #ccc;
  font-size: 50px;
}

.laoren0 h2 {
  width: 800px;
  min-width: 800px;
  height: 50px;
  /* margin: 0 auto; */
  position: relative;
  top: 43%;
  left: 40%;
  color: #aaa;
  font-size: 40px;
}

.info h3 {
  color: white;
}

.laoren {
  width: 80%;
  min-width: 1200px;
  margin: 0 auto;
}

.middleshicai {
  width: 800px;
  min-width: 800px;
  background: url(../assets/images/pr_t.png) no-repeat;
  height: 64px;
  font-size: 30px;
  color: #000000;
}

#ha {
  width: 100%;
  min-width: 1200px;
  height: 70px;
}

.header {
  margin-top: 25px;
  font-size: 20px;
  color: #666;
}

#tiaozhuan {
  width: 100%;
  /* margin-left: 50px; */
  /* margin-bottom: 20px; */
}

#tianzhuan0 {
  width: 80%;
  min-width: 1000px;
  text-align: center;
  font-size: 40px;
  margin: 0 auto;
  line-height: 80px;
  color: rgb(160, 190, 117);
  /* border:1px solid #ccc; */
  margin-top:30px;
}

#tiaozhuan {
  width: 1400px;
  height:720px;
  margin-bottom:80px;
  margin-left: -150px;
  /* border:1px solid #ccc; */
}
ul li{
 float: left;
 margin-top:50px;
 margin-left:40px;
}
a{
   text-decoration: none;
}
/* #tiaozhuan #tiaozhuan1 li {
  flex: 1;
  align-self: center;
} */
#tiaozhuan #tiaozhuan1 li img {
  height: 260px;
  width: 240px;
  /* border: 1px solid #ccc; */
  border-radius: 25px;
  margin-left:60px;
  /* border:1px solid olive; */
}
#tiaozhuan #tiaozhuan1 li :hover{
  width: 240px;
  height: 260px;
  box-shadow: 5px 5px 5px;
  border:1px solid  #ccc;
}
#tiaozhuan #tiaozhuan1 li a,
#tiaozhuan #tiaozhuan2 li a {
  font-size: 18px;
  color: white;
  text-align: center;
    
}

#tiaozhuan #tiaozhuan1 li .a11,
#tiaozhuan #tiaozhuan2 li .a11 {
  height: 30px;
  width: 240px;
  margin-top: 15px;
  line-height: 30px;
  border: 1px solid #ccc;
  background-color: rgb(160, 190, 117 );
  border-radius: 5px;
  margin-left:60px;
}

#tiaozhuan #tiaozhuan1 li a:hover,
#tiaozhuan #tiaozhuan2 li a:hover {
  color: green;
}

#tiaozhuan h1 {
  color: rgb(160, 190, 117);
  text-align: center;
  margin-top: 30px;
}
.grid_item_img,
.grid_item_img1 {
  width: 350px;
  height: 200px;
  margin-left: 40px;
  margin-top: 40px;
  margin-right:40px;
  float: left;
}
.container p {
  font-size: 18px;
  color: #333;
  margin-top: 15px;
}
.foot p {
  font-size: 18px;
  color: #333;
  margin-top: 15px;
}
/* .container p span{
    font-size: 22px;
    color: #333;
   position: relative;
   top: 20px;
  } */

.foot p span {
  font-size: 22px;
  color: #333;
  position: relative;
  top: 20px;
}

a.grid_item {
  display: block;
  margin-bottom: 30px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
  height: 200px;
}
.main_title_3 p {
  margin-top: 10px;
  text-align: center;
  color: burlywood;
  font-size: 24px;
}

.main_title_3 h2 {
  margin-top: 30px;
  font-size: 34px;
  color: rgb(160, 190, 117);
  text-align: center;
}

a.grid_item .info {
  position: absolute;
  width: 100%;
  display: block;
  padding: 25px 25px 10px 25px;
  color: #fff;
  left: 0;
  bottom: 0;
  background: transparent;
  background: -webkit-linear-gradient(top, transparent, #000);
  background: linear-gradient(to bottom, transparent, #000);
  box-sizing: border-box;
}

a.grid_item .info em {
  position: absolute;
  right: 25px;
  bottom: 17px;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  font-size: 0.8125rem;
}

a.grid_item figure {
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  width: 100%;
  height: 100%;
}
a.grid_item figure img {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  left: 50%;
  top: 50%;
  -o-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

a.grid_item:hover figure img {
  -o-transform: translate(-50%, -50%) scale(1.1);
  transform: translate(-50%, -50%) scale(1.1);
}
</style>